<template>
	<!-- <div style="background-color: #42b983;"> -->
  <div class="login_container">
    <div class="login_box">
	<el-form :model="user" status-icon ref="user" label-width="70px" class="userForm">
		<h3 class="title">社团后台管理系统</h3>
		<el-form-item label="账号"><el-input v-model="user.account" placeholder="请输入你的账号" @input="change($event)"></el-input></el-form-item>
		<el-form-item label="密码" prop="pass"><el-input placeholder="请输入输入密码" type="password" v-model="user.password"></el-input></el-form-item>
		<el-form-item label="验证码">
			<el-input v-model="user.code" placeholder="请输入验证码" autocomplete="off"></el-input>
			<img :src="captchaUrl" alt="验证码" @click="refreshCode" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="login">提交</el-button>
			<el-button @click="resetForm('user')">重置</el-button>
		</el-form-item>
	</el-form>
	</div>
	</div>
	
	

</template>

<script>

const OK = 200;
export default {
	data() {
		return {
			rules: {},
			user: {},
			code: '',
			token: '',
			captchaUrl: ''
		};
	},
	methods: {
		login: function() {
			this.$axios
				.post('/api/users/login', this.user)
				.then(res => {
					console.log(this.user);
					// this.$layer.msg(res.data);
					console.log(res.data);
					if (res.data.code == OK) {
						this.$message.success('登录成功');
						this.$cookies.set('token', res.data.data, 60 * 30);
						this.token = res.data.data;
						console.log(this.token);
						this.$router.push({ name: 'Home' });
					} else {
						this.$message.error(res.data.message);
						this.refreshCode();
					}
				})
				.catch(function (error) {
				    this.$message.error(error);
				  });
		},
		refreshCode: function() {
			this.captchaUrl = '/api/users/getKaptcha?time=' + new Date().getTime();
			console.log('更新' + this.captchaUrl);
		},
		resetForm: function() {
			this.user.account='';
			this.user.password='';
			this.user.code='';
		},
		tryToAminPage: function() {
			var token = this.$cookies.get('token');
			if (token != null) this.$router.push({ name: 'Home' });
		},
		// test: function() {
		// 	(this.user.account = 'test@163.com'), (this.user.password = '123456');
		// }
	},
	change(e){
		e.$forceUpdate(e);
	},
	created() {
		// this.tryToAminPage();
		//this.test();
		this.refreshCode();
	},
	
};
</script>




<style scoped="scoped">
.userForm {

	width: 1100px;
	margin: 0 auto;
	padding: 80px;

	background-color: #f8f6f6;
    box-shadow: 5px 5px 5px #cccccc;
}
.login_container {
    height: 100%;
	width: 100%;
  }
	.title{
		margin: 0px auto 30px auto;
	text-align: center;
	font-size: 30px;
	}
  .login_box {
	display: flex;
	justify-content: center;
	align-items: center;
	/* background-image: url(D:\demo2\club-master\club-admin\src\assets\images\bjs.png); */
	/* background-image: url("../assets/images/bjs.png"); */
	background-size: cover;
    width: 450px;
    height: 300px;
    background-color: #fff;
	background-image: url();
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	/* display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover; */
  

}
</style>




